import Icon from '@/components/Icon';
import {Pressable, Text, View, useTheme} from 'native-base';
import React from 'react';
import {TouchableHighlight} from 'react-native';

export default function ({
  searchHistory,
  onSearchHis,
  ondelHis,
}: {
  searchHistory: Array<any>;
  onSearchHis: (item: any) => void;
  ondelHis: () => void;
}) {
  const theme = useTheme();
  return (
    <>
      <View ml={'1'} py={'2'} flexDirection={'row'}>
        <Text>搜索记录</Text>
        <View ml={'auto'}>
          <Pressable flexDirection={'row'} onPress={ondelHis}>
            <Icon iconName={'\ue671'} />
            <Text>清除记录</Text>
          </Pressable>
        </View>
      </View>

      <View
        w={'full'}
        flexDirection={'row'}
        justifyContent={'flex-start'}
        flexWrap={'wrap'}>
        {searchHistory.map((item, index) => {
          return (
            <TouchableHighlight
              activeOpacity={0.5}
              underlayColor={theme.colors.dark[700]}
              style={{marginLeft: 5, width: '18.6%'}}
              key={index}
              onPress={() => onSearchHis(item)}>
              <Text fontSize={'sm'} color={'dark.500'} isTruncated w={'full'}>
                {item}
              </Text>
            </TouchableHighlight>
          );
        })}
      </View>
    </>
  );
}
